<section fxLayoutAlign="start center" fxLayoutGap="48px" [style.padding]="'10px 24px'">
    <div  *ngFor="let detail of conf.details">
        <p>{{ detail.label | uppercase | translate }}</p>
        <h4 class="mb-0">{{ detail.value }}</h4>
    </div>
</section>

<ng-container *ngIf="conf.actions && conf.actions.length > 0">
    <mat-divider></mat-divider>
    
    <section fxLayoutAlign="start center" fxLayoutGap="8px" [style.padding]="'0 24px'">
        <ng-container *ngFor="let action of conf.actions">
            <button
                *ngIf="isActionVisible(action)"
                fxLayoutAlign="center center"
                mat-button
                type="button"
                (click)="action.onClick(conf.config)"
                id="{{ conf.entityName }}_{{ action.name }}_{{ action.id }}"
            >
                <mat-icon class="mr-1">{{ action.icon }}</mat-icon>
                <span>{{ action.label | translate }}</span>
            </button>
        </ng-container>
    </section>
</ng-container>
